<template>
	<view class="logo-other">
		<view class="other-text"><view>或者用以下方式登录</view></view>
			<view class="other">
				<view class="other-item">
					<image src="../static/image/wx.png" mode="" @tap="loginOther('weixin')"></image>
				    <view>微信登录</view>
				</view>
				<view class="other-item">
					<image src="../static/image/wb.png" mode=""  @tap="loginOther('sinaweibo')"></image>
				    <view>微博登录</view>
				</view>
				<view class="other-item">
					<image src="../static/image/qq.png" mode=""  @tap="loginOther('qq')"></image>
				    <view>QQ登录</view>
				</view>
			</view>
	</view>
</template>

<script>
	import $http from "@/common/api/request.js"
	import {
		mapMutations
	} from "vuex"
	export default{
	methods:{
		...mapMutations(['login']),
		loginOther(mode){
			uni.login({
				provider:mode,
				success: (res) => {
					uni.getUserInfo({
						provider:mode,
						success: (res) => {
							let provider=mode;
							let openId=res.userInfo.openId;
							let nickName=res.userInfo.nickName;
							let avatarUrl=res.userInfo.avatarUrl;
							$http.request({
								url: "/loginother",
								method: "POST",
							    data:{
									provider,
									openId,
									nickName,
									avatarUrl
								}
							}).then((res) => {
								uni.showToast({
									title:res.msg
								})
								
								this.login(res.data)
								
								setTimeout(()=>{
									uni.redirectTo({
										url:"/pages/index/index"
									})
								},2000)
 	
							}).catch(() => {})
						}
						
					})
				}
				
			})
		}
	}	
	}
</script>

<style scoped>
	.login-other{
		padding: 100rpx 0;
	}
	.other-text{
		display: flex;
		padding: 50rpx 0;
	}
	.other-text view{
		line-height: 0;
		padding: 0 10rpx;
	}
	.other-text:after{
		flex:1;
		content: '';
		height: 2rpx;
		background-color:#acacac;
	}
	.other-text:before{
		flex:1;
		content: "";
		height: 2rpx;
		background-color: #acacac;
	}
	.other{
		display: flex;
		justify-content: space-between;
		padding: 0 80rpx;
	}
	.other-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.other-item image{
		width: 80rpx;
		height: 80rpx;
	}
</style>